import * as echarts from "echarts";
const createOption = ({
  data = [
    // { name: '干散货', value: 1.4 },
    // { name: '油品', value: 0.73 },
    // { name: '集装箱', value: 0.69 }
  ],
  title = '' }
) => {
  if (title.length > 8) {
    if (title.indexOf('发展') != -1) {
      title = title.split('发展')[0]
    } else if (title.indexOf('股份') != -1) {
      title = title.split('股份')[0]
    } else if (title.indexOf('有限公司') != -1) {
      title = title.split('有限公司')[0]
    } else {
      title = title.slice(0, 8)
    }
  }
  data = data.map(item => ({ ...item, value: item.count })) // 处理count数据对应value的问题
  const colors = [
    '#1A77F8',
    '#F1CA4C',
    '#A2ACC2',
    '#4BB695',
    '#7784A4',
    '#E18064',
    '#84DBEA',
    '#9F8AD3',
    '#EFAA73',
    '#5CA6D0'
  ];
  // 计算总量
  let count = data
    .reduce((pre, cur) => {
      pre += parseFloat(cur.value)
      return pre
    }, 0)
    .toFixed(2)
  const regexp = /(?:\.0*|(\.\d+?)0+)$/
  count = count.replace(regexp, '$1') - 0
  // 生成图表各项数据
  const serieData = data.map((item, index) => {
    return {
      ...item,
      label: {
        show: true,
        formatter: ['{value|{b}}', '{value|{c}}'].join('\n'),
        lineHeight: 11,
        rich: {
          value: {
            align: 'left',
            color: colors[index],
            fontSize: 9,
          }
        }
      }
      // label: {
      //   color: colors[index],
      // },
    }
  })
  const option = {
    color: colors,
    backgroundColor: "transparent",
    title: [
      {
        text: count,
        left: 'center',
        top: '43%',
        textStyle: {
          color: '#87BCFF',
          fontSize: '16',
          fontWeight: 500
        }
      },
      {
        text: title,
        left: 'center',
        bottom: '0%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: '12',
          fontWeight: 500
        }
      },
      // {
      //   text: unit,
      //   left: 'center',
      //   top: '66%',
      //   textStyle: {
      //     color: '#87BCFF',
      //     fontSize: '12',
      //     fontWeight: 400
      //   }
      // }
    ],
    tooltip: {},
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
    },
    series: [
      {
        type: 'pie',
        radius: ['48%', '55%'],
        center: ['50%', '50%'],
        // label: {
        //   show: true,
        //   position: 'outside',
        //   // formatter: function (params) {
        //   //   return `${params.name} ${params.value}`
        //   // },
        //   edgeDistance: 10
        // },
        labelLine: {
          length: 7,
          length2: 7,
          show: true
        },
        data: serieData
      },
    ]
  }
  return data.length ? option : {}
}

export const generatePieChart = (el, data = {}) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(el);
  // 指定图表的配置项和数据
  const option = createOption(data)
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  return myChart

}

export const updatePieChart = (chart) => {
  // 指定图表的配置项和数据
  const option = createOption()
  // 使用刚指定的配置项和数据显示图表。
  chart.setOption(option);
}

export default generatePieChart